<template>
  <el-drawer :visible.sync="visible" :title="dataForm.title + '留言查看'" :close-on-click-modal="false" :close-on-press-escape="false" size="50%">
    <div class="comment" v-for="(res, index) in commentList" :key="res.id">
			<div class="left">
        <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
      </div>
			<div class="right">
				<div class="top">
					<div class="name">{{ res.creatorName }}</div>
				</div>
				<div class="content">{{ res.content }}</div>
        <div class="reply-it" @click="replyIt(res.id)"><i class="el-icon-edit"></i>点击回复：{{ res.creatorName }}</div>
				<div class="reply-box">
					<div class="item" v-for="(item, index) in res.children" :key="item.index">
						<div class="username">{{ item.creatorName }} 回复 {{ res.creatorName }}</div>
						<div class="text">{{ item.content }}</div>
					</div>
				</div>
			</div>
		</div>
  </el-drawer>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        pid: '',
        postsId: '',
        content: '',
        creator: '',
        createDate: '',
        updater: '',
        updateDate: ''
      },
      commentList: [],
      replyData: {
        pid: '',
        postsId: '',
        content: ''
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 点击回复
    replyIt (pid) {
      this.$prompt('请输入回复内容', '消息回复', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.replyData.pid = pid,
          this.replyData.postsId = this.dataForm.id,
          this.replyData.content = value
          console.log('replyData' + this.replyData)
          this.$http.post('/health/postscomments/', this.replyData).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            // duration: 500,
            // onClose: () => {
            //   this.visible = false
            //   this.$emit('refreshDataList')
            // }
            
          })
          this.getInfo()
        }).catch(() => {})
          // this.$message({
          //   type: 'success',
          //   message: '你的邮箱是: ' + value
          // });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/health/postscomments/getCommentsByPostsId/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.commentList = {
          ...this.commentList,
          ...res.data
        }
      }).catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http[!this.dataForm.id ? 'post' : 'put']('/health/postscomments/', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss" scoped>
.comment {
	display: flex;
	padding: 5px 5px 5px 20px;
	.right {
		flex: 1;
		padding-left: 10px;
		font-size: 14px;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			.name {
				color: #5677fc;
			}
			.like {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 14px;
				.num {
					margin-right: 4px;
					color: #9a9a9a;
				}
			}
			.highlight {
				color: #5677fc;
				.num {
					color: #5677fc;
				}
			}
		}
		.content {
			margin-bottom: 10px;
		}
    .reply-it {
      margin-left: 20px;
      font-size: 12px;
			color: green;
    }
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12px;
			.item {
				padding: 10px;
				.username {
					font-size: 14px;
					color: #999999;
				}
			}
			.all-reply {
				padding: 10px;
				display: flex;
				color: #5677fc;
				align-items: center;
				.more {
					margin-left: 6px;
				}
			}
		}
		.bottom {
			margin-top: 1px;
			display: flex;
			font-size: 14px;
			color: #9a9a9a;
			.reply {
				color: #5677fc;
				margin-left: 100px;
			}
		}
	}
}
</style>